<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟用户登录</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
		<!--引入第三方的样式之外还可以自己再定义样式,有冲突会覆盖-->
		<style>
			/*显示网页的宽度*/
			.container{
				width: 300px;
				
			}
		</style>
		<script type="text/javascript" src="js/jquery.min.js">
			
		</script>
	</head>
	<body>
		<div class="container">
			<h3>用户登录</h3>
				<!--展示区域,登录成功或失败的信息,先隐藏-->
				<div id="msg" style="display: none;">
					123
				</div>
			<div class="form-group">
				<label>用户名:</label>
				<input placeholder="请输入用户名" autocomplete="on" class="form-control" type="text" name="username" id="username" />
			</div>	
			<div class="form-group">	
				<label class="form-group">密码:</label>
				<input placeholder="请输入密码" class="form-control" type="password" name="password" id="password"  />
			</div>
			<div>
				<button class="btn btn-success" onclick="doSubmit()" id="btnSubmit">登录</button>
				<button class="btn btn-danger" onclick="doClear()" id="btnClear">清空</button>
			</div>
		</div>
	</body>
		<script type="text/javascript">
			function jsdoSubmit(){
				//获取用户名和密码的内容
				var username=document.getElementById("username");
				var password=document.getElementById("password");
				console.log(username.value);
				console.log(password.value);
				//获取到msg框,设置新值,展示msg框,设置新颜色:红色
				var msg=document.getElementById("msg");
				//div和input框获取值语法不同:注意
				msg.innerText=username.value + "登录成功";
				//改变mag的样式
				msg.style="display:block; color: #aa0000;background-color: #dfff09;margin: 5px; padding: 10px  ";
			}
			function doSubmit(){
				var username = $("#username");
				var password = $("#password");
				var msg=$("#msg");
				msg.text(username.val ()+',登录成功');
				msg.css("display","block");
				msg.css("color","#aa0000");
				msg.css("background-color","#dfff09");
				msg.css("margin","5px");
				msg.css("padding","10px");
			}
			function jsdoClear(){
				document.getElementById("username").value='';
				document.getElementById("password").value='';
			}
			function doClear(){
				$("#username").val('');
				$("#password").val('');
			}
		</script>
</html>
